<template>
  <div class="change-password-form-container">
    <a-form
      id="formLogin"
      ref="formLogin"
      :form="form"
    >
      <a-form-item
        label="Old Password:"
        :colon="false"
        required
      >
        <a-input-password
          v-decorator.trim="[
            'old_password',
            {
              rules: [
                formRules.required('Incorrect password'),
                formRules.passWord()
              ],
              validateFirst: true,
              validateTrigger: 'change'
            }
          ]"
          type="text"
          placeholder="Old Password"
        />
      </a-form-item>

      <a-form-item
        label="New Password:"
        :colon="false"
        required
      >
        <a-input-password
          v-decorator.trim="[
            'new_password',
            {
              rules: [
                formRules.required('Incorrect password'),
                formRules.passWord()
              ],
              validateFirst: true,
              validateTrigger: 'change'
            }
          ]"
          type="text"
          placeholder="New Password"
        />
      </a-form-item>

      <a-form-item
        label="Confirm Password:"
        :colon="false"
        required
      >
        <a-input-password
          v-decorator.trim="[
            'new_password_again',
            {
              rules: [
                formRules.required('Incorrect password'),
                formRules.passWord(),
                { validator: confirmPasswordFormRule }
              ],
              validateFirst: true,
              validateTrigger: 'change'
            }
          ]"
          type="text"
          placeholder="Confirm Password"
        />
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import form from './form';

export default {
  mixins: [form]
};
</script>

<style lang="scss">
.change-password-form-container {
  .ant-form-item {
    margin-bottom: 10px;
  }
}
</style>
